<template>
	<ve-content>
		<!-- 筛选条件 -->
		<ve-filtrate
			ref="filtrate"
			:advanced="true"
			:filtrates="filtrates"
			:search-loading="isLoading"
			@submit="filterSubmit"
		/>
		<!-- 表格和分页器 -->
		<ve-operation class="operation-box">
			<div>
				<el-button
					v-permiss-code="'rc/courseware/wait-edit'"
					:class="[{'theme_font_color': selectItems.length},{'theme-border-color': selectItems.length}]"
					@click="onEditBatch"
				>
					批量编辑
				</el-button>
				<el-button
					v-permiss-code="'rc/courseware/wait-delete'"
					:class="[{'theme_font_color': selectItems.length},{'theme-border-color': selectItems.length}]"
					@click="delFileWaitBatch(selectIds)"
				>
					批量删除
				</el-button>
				<el-button
					v-permiss-code="'rc/courseware/wait-edit'"
					:class="[{'theme_font_color': selectItems.length},{'theme-border-color': selectItems.length}]"
					@click="setPlaybackBatch('Y')"
				>
					批量设为直播回放
				</el-button>
				<el-button
					v-permiss-code="'rc/courseware/wait-edit'"
					:class="[{'theme_font_color': selectItems.length},{'theme-border-color': selectItems.length}]"
					@click="setPlaybackBatch('N')"
				>
					批量取消直播回放
				</el-button>
			</div>
			<el-button
				v-permiss-code="'rc/courseware/wait-audit'"
				type="primary"
				@click="waitAuditBatch(selectIds)"
			>
				批量进入待审
			</el-button>
		</ve-operation>
		<!-- 表格 -->
		<el-table
			ref="table"
			v-loading="isLoading"
			row-key="resourceId"
			:stripe="true"
			:data="tableList"
			@select="selectionChange"
			@select-all="selectionChange"
			@sort-change="sortChange"
		>
			<el-table-column align="center" type="selection" width="50" />
			<el-table-column
				type="index"
				label="序号"
				width="60"
				align="center"
				:index="(index) => (page.pageIndex - 1) * page.pageSize + index + 1"
			/>
			<el-table-column
				align="left"
				label="课件名称"
				width="120"
				v-slot="{ row }"
			>
				<el-tooltip
					effect="light"
					placement="top-start"
					:content="`第${row.sectionNumber}节课 ${row.name}`"
				>
					<span class="text-overflow-1">第{{ row.sectionNumber }}节课 {{ row.name }}</span>
				</el-tooltip>
			</el-table-column>
			<el-table-column align="left" prop="sourceFileName" label="文件名称" />
			<el-table-column
				align="center"
				sortable="custom"
				prop="createTime"
				label="上传时间"
				width="140"
			/>
			<el-table-column
				align="center"
				prop="duration"
				label="课件时长"
				width="80"
			/>
			<el-table-column
				label="课件大小"
				width="100"
				align="center"
				v-slot="{ row }"
			>
				{{ (row.fileSize/1048576).toFixed(2) }}MB
			</el-table-column>
			<el-table-column
				label="转码状态"
				width="80"
				align="center"
				v-slot="{ row }"
			>
				<span
					:class="{'c-red': row.escapeState === 'ECF'}"
				>{{ Dictionary.get("ESCAPE_STATUS")[row.escapeState] }}</span>
			</el-table-column>
			<el-table-column
				label="是否加密"
				width="70"
				align="center"
				v-slot="{ row }"
			>
				{{ row.isEncryption === 'Y' ? '加密' : '未加密' }}
			</el-table-column>
			<el-table-column
				label="视频vid"
				align="center"
				width="150"
				v-slot="{ row }"
			>
				<div class="vid-box text-overflow-1">
					<el-tooltip effect="light" placement="top" :content="row.videoVid">
						<span>{{ row.videoVid }}</span>
					</el-tooltip>
					<div class="el-icon-copy-document theme_font_color" @click="copyText(row.videoVid)" />
				</div>
			</el-table-column>
			<el-table-column
				label="是否直播回放"
				width="80"
				align="center"
				v-slot="{ row }"
			>
				<el-switch
					:disabled="!PermissUtil.checkPermiss('rc/courseware/wait-edit')"
					:value="row.livePlaybackState"
					active-value="Y"
					inactive-value="N"
					@change="playbackSwitch(row)"
				/>
			</el-table-column>
			<el-table-column
				label="上传人"
				width="60"
				align="center"
				v-slot="{ row }"
			>
				<template v-if="row.createUserName">{{ row.createUserName }}</template>
				<template v-else>
					---
					<el-popover
						placement="top"
						width="272"
						trigger="hover"
						content="该保利账号未设置对应员工账号，请至课件上传账号页面添加账号对应关系"
					>
						<span slot="reference" class="el-icon-warning" />
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column
				label="是否编辑"
				width="70"
				align="center"
				v-slot="{ row }"
			>
				{{ row.editState === 'Y' ? '已编辑' : '待编辑' }}
			</el-table-column>
			<el-table-column
				label="操作"
				width="100px"
				align="center"
				v-slot="{ row }"
			>
				<el-button
					v-permiss-code="'rc/courseware/wait-edit'"
					type="text"
					@click="onEdit(row.resourceId)"
				>
					编辑
				</el-button>
				<el-button
					v-permiss-code="'rc/courseware/wait-delete'"
					type="text"
					@click="delFileWaitBatch([row.resourceId])"
				>
					删除
				</el-button>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<ve-pagination
			:page-size-options="[5,10,20,50,100,200,300]"
			:get-page="queryTableData"
			:page.sync="page"
		/>
		<!-- 课件编辑弹窗 -->
		<edit-dialog v-if="isShowEditDialog" :visibly.sync="isShowEditDialog">
			<!-- 基础信息 -->
			<edit-base
				v-loading="baseLoading"
				:has-name="false"
				:is-batch="isEditBatchStatus"
				:default-data="editBaseInfo"
				@submit="baseEditSubmit"
			/>
			<!-- 项目信息 -->
			<edit-project
				v-loading="projectLoading"
				style="margin-top:8px"
				:default-data="editProjectInfo"
				@submit="projectEditSubmit"
				@delete="projectEditDelete"
			/>
			<template #footer>
				<div class="dialog-footer-box">
					<el-button @click="isShowEditDialog = false">关 闭</el-button>
					<el-button
						v-permiss-code="'rc/courseware/wait-audit'"
						v-if="!isEditBatchStatus"
						type="primary"
						:loading="isLoading"
						@click="waitAuditBatch([editInfo.resourceId])"
					>
						进入待审
					</el-button>
				</div>
			</template>
		</edit-dialog>
	</ve-content>
</template>

<script src="./index.mjs"/>

<style lang="less" scoped>
	.c-red {
		color: #f56c6c;
	}
	.el-icon-warning {
		color: #ffa613;
		cursor: pointer;
	}
	.vid-box {
		padding-right: 17px;
		position: relative;

		.el-icon-copy-document {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
		}
	}

	.operation-box {
		display: flex;
		justify-content: space-between;
	}
	.dialog-footer-box {
		text-align: right;
	}
</style>
